<template>
    <div>
        <div class="card" v-for="i in cardData" :key="i" @click="toCardDetails(i.id)">
            <div class="top">
                <h3 class="title">{{i.job}}</h3>
                <span class="wages">{{i.salary}}元</span>
            </div>
            <div class="label">
                <span class="label-item">{{i.industry}}</span><span class="label-item">{{i.education}}</span><span class="label-item">{{i.experience}}</span>
            </div>
            <div class="name">
                <span class="intro">{{i.description}}</span>
            </div>
            <div class="bottom">
                <div class="avatar">
                    <div class="img"><img :src="i.avatar?i.avatar:'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'" alt=""></div>
                    <span class="enter-name">{{i.name}}</span>
                </div>
                <div class="address">{{i.address}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router"
    const props = defineProps<{cardData:any}>();

    const router = useRouter()

    const toCardDetails = (id)=>{
        router.push({path:"card_details",query:{id:id}})
    }
</script>

<style lang="scss" scoped>
.card{
    width: 23rem;
    padding: 1rem;
    margin: 0.5rem auto 0;
    background: #fff;
    border-radius: 0.5rem;
    .top{
        display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;
        .title{flex: 1; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-weight: 700;font-size: 1rem;}
        .wages{max-width: 50%;color: var(--van-primary-color);}
    }
    .name{margin-bottom: 0.5rem;
        .intro{color: #888;margin-right: 0.5rem;}
    }
    .label{margin-bottom: 0.8rem;
        .label-item{display: inline-block;background: #ebebeb;border-radius: 0.3rem; font-size: 0.8rem;margin-right: 0.3rem;padding: 0.2rem 0.4rem;}
    }
    .bottom{display: flex;justify-content: space-between;align-items: center;
        .avatar{display: flex;align-items: center;
            .img{width: 2.5rem;height: 2.5rem;overflow: hidden;border-radius: 50%;margin-right: 0.5rem;
                img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
            }
        }
    }
}
</style>
